<template>
  <div class="look-down-wrap">
    <ul>
      <li>
        <i class="el-icon-view" title="浏览"></i>
        <p>
          <span v-show="txtShow">浏览</span> {{ concernedLog.clickNum || 0 }}
        </p>
      </li>
      <li class="pointer" @click.once="handleAdd('like')">
        <i class="iconfont icon-dianzan" title="点赞"></i>
        <p>
          <span v-show="txtShow">点赞</span> {{ concernedLog.likeNum || 0 }}
        </p>
      </li>
      <li>
        <i class="el-icon-download" title="下载"></i>
        <p>
          <span v-show="txtShow">下载</span> {{ concernedLog.downloadNum || 0 }}
        </p>
      </li>
      <li class="pointer" @click.once="handleAdd('collect')">
        <i class="el-icon-star-on" title="收藏"></i>
        <p>
          <span v-show="txtShow">收藏</span> {{ concernedLog.collectNum || 0 }}
        </p>
      </li>
      <li class="pointer" @click="handleAdd('share')">
        <i class="el-icon-share" title="分享"></i>
        <p>
          <span v-show="txtShow">分享</span> {{ concernedLog.shareNum || 0 }}
        </p>
      </li>
    </ul>
    <Share ref="share" />
  </div>
</template>
<script>
import { openApiSysConcernedLogQuery } from '@/api/openApi'
import {
  sysConcernedLogAdd,
  sysConcernedLogOpenApiAdd,
} from '@/api/home/sysConcernedLog'
export default {
  components: {
    Share: () => import('./share.vue'),
  },
  data() {
    return {
      concernedLog: {},
      form: {
        type: this.type,
        resId: this.resId,
        opt: 'click',
      },
    }
  },
  props: {
    //是否显示文字
    txtShow: {
      type: Boolean,
      default: false,
    },
    //类型,1-课程，2-知识点，3-文件…
    type: {
      type: Number | String,
      default: 1,
    },
    resId: {
      type: Number | String,
    },
  },
  mounted() {
    this.handleAdd('click')
  },
  methods: {
    getInfo() {
      openApiSysConcernedLogQuery({ type: this.type, resId: this.resId }).then(
        (res) => {
          this.concernedLog = res.data.data[0]
        },
      )
    },
    handleAdd(name) {
      Object.assign(this.form, { opt: name })
      if (this.resId == undefined) return
      // 预览模式不触发事件
      if (this.$route.query.queryMode == 2) {
        if (name != 'click') {
          this.previewTip()
        }
        return
      }
      let userId = this.$store.getters.userId
      if (userId) {
        if (name == 'share') {
          this.$refs.share.dialogVisible = true
        }
        sysConcernedLogAdd(this.form).then((res) => {
          this.getInfo()
        })
      } else {
        if (name == 'share') {
          this.loginTip()
          return
        }
        sysConcernedLogOpenApiAdd(this.form).then((res) => {
          this.getInfo()
        })
      }
    },
  },
}
</script>
<style scoped lang="scss" >
.look-down-wrap {
  display: inline-block;
  height: 24px;
  ul {
    li {
      float: left;
      line-height: 24px;
      margin-right: 25px;
      font-size: 14px;
      i {
        color: #666;
        font-size: 16px;
        float: left;
        margin-top: 4px;
        font-weight: bold;
        &.el-icon-view {
          color: #157ac7;
        }
        &.icon-dianzan {
          color: #bd1e1e;
        }
        &.el-icon-download {
          color: #14ab4d;
        }
        &.el-icon-star-on {
          color: #f40;
        }
        &.el-icon-share {
          color: #409eff;
        }
      }
      .icon-dianzan {
        margin-top: 0;
      }
      p {
        display: inline;
        margin-left: 4px;
        color: #666;
      }
    }
    .pointer {
      cursor: pointer;
      p {
        &:hover {
          color: var(--colorH1);
        }
      }
    }
  }
}
</style>